<template>
	<div class="player">
        <div class="video-div">
            <div class="svg-div goback" @click="$router.go(-1)">
                <svg class="icon-svg">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#goback"></use>
                </svg>
            </div>
            <video class="video" :src="res_data.video_url" controls="controls" autoplay="autoplay">
                <source :src="res_data.video_url" type="video/ogg" />
                <source :src="res_data.video_url" type="video/mp4" />
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="comment-box">
        </div>
        <div class="info">
            <div :class="`title ellipsis icon-from icon-from-${res_data.pub_platform}`">
                {{ res_data.title }}
            </div>
            <div class="info-click">
                <div class="user">
                    <div class="svg-div">
                        <svg class="icon-svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mine"></use>
                        </svg>
                    </div>
                    {{ res_data.author }}
                </div>
                <!-- <div class="date">
                    <div class="svg-div">
                        <svg class="icon-svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#calendar"></use>
                        </svg>
                    </div>
                    {{ res_data.pub_time }}
                </div> -->
                <div class="favor" @click="utilStore(res_data)">
                    <div class="svg-div" >
                        <svg class="icon-svg" :fill="res_data.store!=0&&'#f86254'">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="res_data.store ==0?'#favor':'#favor-active'"></use>
                        </svg>
                    </div>
                    {{ res_data.store_num }}
                </div>

                <div class="appreciate" @click="utilGood(res_data)">
                    <div class="svg-div">
                        <svg class="icon-svg" :fill="res_data.good!=0&&'#f86254'">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="res_data.good==0?'#appreciate':'#appreciate-active'"></use>
                        </svg>
                    </div>
                    {{ res_data.good_num }}
                </div>

                <div class="share">
                    <div class="svg-div">
                        <svg class="icon-svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="comments">
            <div class="num">
                <div class="svg-div">
                    <svg class="icon-svg">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#comments"></use>
                    </svg>
                </div>
                {{`${comment_num}(评论最多80个字符)`}}
            </div>
            <div class="comments-ul">
                <div class="comments-li" v-for="item in commentList" :key="item.id">
                    <div class="avatar">
                        <img :src="imgBaseUrl+item.head_img" v-if="item.head_img != ''">
                        <svg class="icon-svg" v-else>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
                        </svg>
                    </div>
                    <div class="cl-con">
                        <div class="name">
                            <span>{{item.username}}</span>
                            <div class="date">{{item.add_time}}</div>
                        </div>
                        <div class="text">
                            {{item.comment}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="comments-input">
            <input class="input" type="text" v-model="comment" placeholder="请输入评论" />
            <div class="submit" @click="subComment">
                发送
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
	import {videodetail, commentArticlecomment,storefrontAdd,updategood,commentAdd, imgBaseUrl} from '@/api'
	import { mapState, mapMutations } from 'vuex'
    export default {
        data(){
            return{
                imgBaseUrl,
                res_data: {},
                comment: '',
                commentList: [],
                comment_num: 0,
                page: 1,
                aid: null,
            }
        },
        mounted() {
            this.getResData();
            this.getComment();
        },
		computed: {
			...mapState([
				'userInfo',
			]),
		},
		methods: {
			...mapMutations([
				'DIALOG_LOGIN',
            ]),
            
            /**
             * 收藏
             */
            utilStore(item){
                if(this.userInfo && this.userInfo.user_id){
                    let para = {
                        aid: item.aid,
                        user_id: this.userInfo.user_id,
                    }
                    storefrontAdd(para).then( res => {
                        if(res.data){
                            this.res_data.store = 1;
                            this.res_data.store_num++;
                        }else{
                            if(res.tologin){
                                this.DIALOG_LOGIN();
                                this.$router.push('/login');
                            }else {
                                if(res.msg === '已经收藏过此视频'){
                                    this.res_data.store = 1;
                                }
                                Toast(res.msg);
                            }
                        }
                    })
                }else{
                    this.DIALOG_LOGIN();
                    this.$router.push('/login');
                }
            },

            /**
             * 点赞
             */
           utilGood(item){
                if(item.goodcan){
                    let para = {
                        aid: item.aid
                    }
                    updategood(para).then(res=> {
                        if(res.data){
                            this.res_data.good = 1;
                            this.res_data.good_num++;
                            this.res_data.goodcan = false;
                        }else{
                            Toast(res.msg);
                        }
                    })
                }
            },

            toDou(n){
                return n<10?'0'+n:n;
            },
            subComment(){
                if(this.userInfo && this.userInfo.user_id){
                    if(this.comment == '' || this.comment == ' '){
                       Toast('内容不能为空！');
                        return
                    }
                    let para = {
                        aid: this.aid,
                        user_id: this.userInfo.user_id,
                        uid: this.userInfo.user_id,
                        comment: this.comment
                    }
                    commentAdd(para).then(res=> {
                        if(res.data){
                            Toast(res.msg);
                            this.comment_num++;
                            let nDate = new Date();
                            let add_time = nDate.getFullYear()+'-'+(nDate.getMonth()+1)+'-'+nDate.getDate()+' '+nDate.getHours()+':'+this.toDou(nDate.getMinutes())+':'+this.toDou(nDate.getSeconds());

                            let commentInfo = {
                                username: this.userInfo.username,
                                comment: this.comment,
                                add_time: add_time,
                                head_img: this.userInfo.head_img,
                            }
                            this.commentList.unshift(commentInfo);
                            this.comment = '';
                        }else{
                            if(res.tologin){
                                this.DIALOG_LOGIN();
                                this.$router.push('/login');
                            }else {
                                Toast(res.msg);
                            }
                        }
                    })
                }else{
                    this.DIALOG_LOGIN();
                    this.$router.push('/login');
                }
            },
            // 获取评论
            getComment(){
                let para = {
                    aid: this.aid,
                    page: this.page,
                }
                commentArticlecomment(para).then(res=> {
                    if(res.data){
                        let res_list = res.data.list;
                        // for(let i=0; i<res_list.length; i++){
                        //     res_list[i].comment = this.replace_em(res_list[i].comment);
                        // }
                        if(this.page===1){
                            this.noData = false;
                            this.commentList = res_list;
                            this.comment_num = res.data.total;

                            if(res.data.total>10){
                                this.pageBtn = true;
                            }else{
                                this.pageBtn = false;
                            }
                        }else{
                            this.commentList = this.commentList.concat(res_list);
                        }

                        if(this.page<res.data.totalpage){
                            this.page++;
                        }else{
                            this.pageBtn = false;
                        }
                    }
                })
            },
            // 加载页面数据
            getResData(){
                this.aid = this.$route.params.aid;
                let para = {
                    aid: this.aid,
                    user_id: this.userInfo?this.userInfo.user_id:'',
                };
                videodetail(para).then(res => {
                    if(res.data){
                        let res_data = res.data;
						res_data.good = 0;
                        res_data.goodcan = true;
                        this.res_data = res_data;
                    }
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	.player {
        .video-div {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9;
            height: 0;
            width: 100%;
            padding-bottom: 56.25%;
            background-color: #000;
            .goback {
                width: 1.95rem;
                height: 1.95rem;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 222;
                
                .icon-svg {
                    fill: #fff;
                    margin-top: 25%;
                    margin-left: 25%;
                    width: 50%; 
                    height: 50%;
                }
            }
            .video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
        .comment-box{
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
        }
        .info {
            padding: 0.4rem;
            background: #fff;
            .title {
                font-size: 0.7rem;
                font-weight: bold;
            }
            .info-click {
                font-size: 0.6rem;
			    margin-top: 0.4rem;
                display: flex;
                justify-content: space-between;
            }
            .info-click>div {
                display: flex;
            }
            .svg-div {
                display: inline-block;
                width: 0.7rem; 
                height: 0.7rem;
                vertical-align: -.125rem;
                margin-right: 0.25rem;
            }
            .icon-svg {
                width: 100%;
                height: 100%;
            }
        }
        .comments {
            background: #fff;
            margin-top: 0.4rem;
            margin-bottom: 2.35rem;
            .num {
                display: flex;
                font-size: 0.6rem;
                padding: 0.4rem 0.4rem;
                border-bottom: 1px solid #cccccc;
                .svg-div {
                    display: inline-block;
                    width: 0.7rem; 
                    height: 0.7rem;
                    vertical-align: -.125rem;
                    margin-right: 0.25rem;
                }
                .icon-svg {
                    width: 100%;
                    height: 100%;
                }
            }
            .comments-ul {
                padding:  0 0.4rem;
            }
            .comments-li:last-child{
                border: none;
            }
            .comments-li {
                display: flex;
                justify-content: space-between;
                padding: 0.4rem 0;
                border-bottom: 1px solid #ddd;
                .avatar {
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 50%;
                    overflow: hidden;
                    .icon-svg {
                        width: 100%;
                        height: 100%;
                    }
                }
                .cl-con {
                    width:13.25rem;
                    font-size: 0.6rem;
                    .name {
                        line-height: 1.5rem;
                        display: flex;
                        justify-content: space-between;
                        .date {
                            color:#ccc;
                            font-size: 0.5rem;
                        }
                    }
                    .text {
                        width: 98%;
                    }
                }
            }
        }
        .comments-input {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 1.95rem;
            width: 100%;
            padding-left: 0.4rem;
            z-index: 9;
            line-height: 1.95rem;
            background: #fff;
            display: flex;
            justify-content: space-between;
            .input {
                display: block;
                margin-top: 2%;
                width: 100%;
                height: 70%;
                border-radius: 5rem;
                border: 1px solid #ccc;
                padding: 0 0.5rem;
            }
            .submit {
                width: 2.5rem;
                height: 1.95rem;
                line-height: 1.95rem;
                text-align: center;
                font-size: 0.6rem;
            }
        }
    }
</style>
